{include file="/sum/common/script" /}

<style>
    .config-index .el-select:not(.num-unit) {
        max-width: 360px;
        width: 100%;
    }

    .config-index .sa-title.is-line {
        margin-bottom: 16px;
    }

    .config-index .pay-config-main {
        --el-main-padding: 0;
    }

    .config-index .platform-item {
        width: 180px;
        height: 240px;
        box-shadow: 0 4px 8px #00000014, 0 8px 16px 2px #00000005;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1;
        background: var(--sa-background-assist);
        position: relative;
        margin-right: 24px;
    }

    .config-index .platform-item .bg {
        position: absolute;
        right: 0;
        top: 0;
        width: 128px;
        height: 128px;
    }

    .config-index .platform-item .iconfont {
        font-size: 64px;
        margin-bottom: 8px;
    }

    .config-index .platform-item .title {
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
    }

    .config-index .platform-item .status {
        margin: 12px 0 20px;
    }

    .config-index .num-unit {
        width: 80px;
    }

    .config-index .goods-item {
        line-height: 1;
    }

    .config-index .goods-item .goods-image {
        margin-right: 8px;
    }

    .config-index .goods-item .goods-title {
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        font-weight: 500;
        color: var(--sa-font);
        margin-bottom: 6px;
    }

    .config-index .goods-item .goods-price {
        line-height: 16px;
        font-size: 12px;
        font-weight: 400;
        color: var(--el-color-danger);
    }

    .el-dialog.configis-upgrade-dialog {
        width: 900px;
    }

    .el-overlay{
        background: rgba(43, 43, 43, 0.05);
        backdrop-filter: blur(2px);
    }

    .configis-upgrade-image {
        width: 900px;
        height: 580px;
        background: #FFFFFF;
        border-radius: 4px;
        position: relative;
    }

    .configis-upgrade-image img {
        width: 100%;
        height: 100%;
    }

    .el-dialog.configis-upgrade-dialog .el-dialog__body {
        padding: 0;
    }

    .el-dialog.configis-upgrade-dialog .el-dialog__header {
        height: 0;
        padding: 0;
    }

    .configis-upgrade-button {
        position: absolute;
        bottom: 162px;
        right: 360px;
    }

    .configis-upgrade-button-upgrade {
        width: 110px;
        height: 34px;
        background: #8322FF;
        border-radius: 2px;
        justify-content: center;
        font-weight: bold;
        font-size: 12px;
        color: #FFFFFF;
        margin-left: 42px;
        cursor: pointer;
    }

    .configis-upgrade-button-upgrade .icon-right {
        margin-left: 12px;
        width: 18px;
        height: 18px;
    }

    .configis-upgrade-button-refresh {
        color: #86818E;
        font-size: 12px;
        cursor: pointer;
    }

    .configis-upgrade-button-refresh .refresh-right {
        margin-right: 6px;
        font-size: 14px;
    }

    .configis-upgrade-close {
        position: absolute;
        top: 53px;
        right: 58px;
        font-size: 20px;
        color: #7F7A87;
        cursor: pointer;
    }
</style>

<div id="index" class="config-index panel panel-default panel-intro" v-cloak>
    <el-container class="panel-block">
        <el-header class="sa-header">
            <el-tabs class="sa-tabs" v-model="state.tabActive" @tab-change="getData">
                <el-tab-pane v-for="item in type.data.api" :label="item.label" :name="item.name">
                </el-tab-pane>
            </el-tabs>
        </el-header>

        <el-main v-if="state.tabActive != 'sum/pay_config'">
            <el-scrollbar height="100%">
                <el-form ref="formRef" :model="form.model" :rules="form.rules" label-width="160px">

                    <!-- 基本信息 -->
                    <template v-if="state.tabActive=='sum/config/basic'">
                        <el-form-item label="Logo" prop="logo">
                            <sa-uploader v-model="form.model.logo"></sa-uploader>
                        </el-form-item>
                        <el-form-item label="项目名称" prop="name">
                            <el-input class="sa-w-360" v-model="form.model.name" placeholder="请输入商城名称"></el-input>
                        </el-form-item>
<!--                        <el-form-item label="客服电话" prop="phone">-->
<!--                            <el-input class="sa-w-360" v-model="form.model.phone" placeholder="请输入客服电话"></el-input>-->
<!--                        </el-form-item>-->
                        <el-form-item label="APP下载链接" prop="app_url">
                            <div class="sa-w-360">
                                <el-input v-model="form.model.app_url" placeholder="请输入APP下载链接"></el-input>
                            </div>
                        </el-form-item>

<!--                        <el-form-item label="项目域名" prop="domain">-->
<!--                            <div class="sa-w-360">-->
<!--                                <el-input v-model="form.model.domain" placeholder="请输入项目域名"></el-input>-->
<!--                            </div>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item v-if="form.model.user_protocol" label="用户协议" prop="user_protocol">-->
<!--                            <el-input class="sa-w-360" v-model="form.model.user_protocol.title" placeholder="请选择">-->
<!--                                <template #append>-->
<!--                                    <div class="cursor-pointer" @click="onSelectRichtext('user_protocol')">选择富文本</div>-->
<!--                                </template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item v-if="form.model.privacy_protocol" label="隐私协议" prop="privacy_protocol">-->
<!--                            <el-input class="sa-w-360" v-model="form.model.privacy_protocol.title" placeholder="请选择">-->
<!--                                <template #append>-->
<!--                                    <div class="cursor-pointer" @click="onSelectRichtext('privacy_protocol')">选择富文本-->
<!--                                    </div>-->
<!--                                </template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item v-if="form.model.about_us" label="关于我们" prop="about_us">-->
<!--                            <el-input class="sa-w-360" v-model="form.model.about_us.title" placeholder="请选择">-->
<!--                                <template #append>-->
<!--                                    <div class="cursor-pointer" @click="onSelectRichtext('about_us')">选择富文本</div>-->
<!--                                </template>-->
<!--                            </el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="版本号" prop="version">-->
<!--                            <el-input class="sa-w-360" v-model="form.model.version" placeholder="请输入版本号"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="版权信息">-->
<!--                            <div class="sa-w-360">-->
<!--                                <el-row :gutter="20">-->
<!--                                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">-->
<!--                                        <el-input v-model="form.model.copyright" placeholder="请输入版权信息">-->
<!--                                        </el-input>-->
<!--                                    </el-col>-->
<!--                                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">-->
<!--                                        <el-input v-model="form.model.copytime" placeholder="请输入版权信息"></el-input>-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </div>-->
<!--                        </el-form-item>-->

<!--                        <div class="sa-title is-line">每日登录</div>-->
<!--                        <el-form-item label="赠送金币" prop="login_score">-->
<!--                            <el-input class="sa-w-360" v-model="form.model.login_score" placeholder="请输入每日登录赠送金币" type="number" step="1"></el-input>-->
<!--                        </el-form-item>-->

                        <div class="sa-title is-line">抽卡</div>
                        <el-form-item label="消耗金币" prop="card_score">
                            <el-input class="sa-w-360" v-model="form.model.card_score" placeholder="请输入抽卡消耗金币" type="number" step="1"></el-input>
                        </el-form-item>

                        <div class="sa-title is-line">签到设置</div>
                        <el-form-item label="周一" prop="mon">
                            <el-input class="sa-w-360" v-model="form.model.signin_gift.mon.title" placeholder="请选择">
                                <template #append>
                                    <div class="cursor-pointer" @click="onSelectGift('mon')">选择礼物</div>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="周二" prop="tue">
                            <el-input class="sa-w-360" v-model="form.model.signin_gift.tue.title" placeholder="请选择">
                                <template #append>
                                    <div class="cursor-pointer" @click="onSelectGift('tue')">选择礼物</div>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="周三" prop="wed">
                            <el-input class="sa-w-360" v-model="form.model.signin_gift.tue.title" placeholder="请选择">
                                <template #append>
                                    <div class="cursor-pointer" @click="onSelectGift('wed')">选择礼物</div>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="周四" prop="thu">
                            <el-input class="sa-w-360" v-model="form.model.signin_gift.tue.title" placeholder="请选择">
                                <template #append>
                                    <div class="cursor-pointer" @click="onSelectGift('thu')">选择礼物</div>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="周五" prop="fri">
                            <el-input class="sa-w-360" v-model="form.model.signin_gift.tue.title" placeholder="请选择">
                                <template #append>
                                    <div class="cursor-pointer" @click="onSelectGift('fri')">选择礼物</div>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="周六" prop="sat">
                            <el-input class="sa-w-360" v-model="form.model.signin_gift.tue.title" placeholder="请选择">
                                <template #append>
                                    <div class="cursor-pointer" @click="onSelectGift('sat')">选择礼物</div>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="周日" prop="sun">
                            <el-input class="sa-w-360" v-model="form.model.signin_gift.tue.title" placeholder="请选择">
                                <template #append>
                                    <div class="cursor-pointer" @click="onSelectGift('sun')">选择礼物</div>
                                </template>
                            </el-input>
                        </el-form-item>

                    </template>

                    <!-- 用户配置 -->
                    <template v-if="state.tabActive=='sum/config/user'">
                        <el-form-item label="默认头像" prop="avatar">
                            <sa-uploader v-model="form.model.avatar"></sa-uploader>
                        </el-form-item>
                        <el-form-item label="默认昵称" prop="nickname">
                            <el-input class="sa-w-360" placeholder="请输入默认昵称" v-model="form.model.nickname"></el-input>
                        </el-form-item>
                        <el-form-item label="默认用户组" prop="nickname">
                            <el-select v-model="form.model.group_id" placeholder="选择次数">
                                <el-option v-for="item in group.select" :label="item.name" :value="item.id+''">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </template>

                    <!-- 平台配置 -->
                    <template v-if="state.tabActive=='sum/config/platform'">
                        <div class="sa-flex sa-flex-wrap">
                            <template v-for="item in platform.data" :key="item">
                                <div class="platform-item sa-flex-col sa-row-center sa-col-center" :class="item.value">
                                    <img class="bg" :src="`/assets/addons/sum/img/config/${item.value}BG.png`" />
                                    <i :class="`iconfont icon${item.value}`" :style="{color:item.color}"></i>
                                    <div class="title" :style="{color:item.color}">{{ item.label }}</div>
                                    <div class="status" :class="platform.status[item.value]?'sa-color--success':'sa-color--info'">
                                        {{platform.status[item.value]? '已开启' : '已关闭'}}
                                    </div>
                                    <el-button type="primary" @click="onEditPlatform(item)">立即配置</el-button>
                                </div>
                            </template>
                        </div>
                    </template>

                    <!-- 语言配置 -->
                    <template v-if="state.tabActive=='sum/config/language'">
                        <el-alert class="mb-4" type="warning">
                            <template #title>
                                <div>1、第一个语言为后台表单默认语言-项目上线后不要随意切换</div>
                                <div>2、不要随意修改语言标识</div>
                            </template>
                        </el-alert>
                        <el-form-item label="语言选项">
                            <div class="sa-template-wrap">
                                <div class="header">
                                    <div class="key">语言标识</div>
                                    <div class="key">语言标题</div>
                                    <div class="oper">操作</div>
                                </div>
                                <template v-if="form.model.option.length>0">
                                    <draggable v-model="form.model.option" :animation="300"
                                               handle=".sortable-drag" item-key="element">
                                        <template #item="{ element, index }">
                                            <div class="item">
                                                <el-form-item class="key" :prop="`option.${index}.slug`">
                                                    <el-input v-model="element.slug" placeholder="语言标识"></el-input>
                                                </el-form-item>
                                                <el-form-item class="key" :prop="`option.${index}.title`">
                                                    <el-input v-model="element.title" placeholder="语言标题"></el-input>
                                                </el-form-item>
                                                <div class="oper">
                                                    <el-button type="danger" link @click="onDeleteLanguage(index)">
                                                        移除
                                                    </el-button>
                                                    <i class="iconfont iconmove sortable-drag"></i>
                                                </div>
                                            </div>
                                        </template>
                                    </draggable>
                                </template>
                                <el-button class="add-params" icon="Plus" @click="onAddLanguage">追加</el-button>
                            </div>
                        </el-form-item>

                    </template>
                    <!-- Redis配置 -->
                    <template v-if="state.tabActive == 'sum/config/redis'">
                        <el-alert class="mb-4" type="warning">
                            <template #title>
                                <div>1、站点配置好之后，请不要随意修改 redis 配置，否则可能导致重要缓存数据和队列数据丢失</div>
                                <div>2、队列驱动为 redis 时，默认读取本配置，也可在 application/extra/queue.php 文件中配置相同参数覆盖本配置</div>
                                <div>3、DB 数据库建议指定 1-15 中的一个数字 (redis 默认16个库 0-15)，服务器有多个站点时，不可与其他站点的 DB 数据库
                                    相同，以免数据错乱，导致系统异常</div>
                            </template>
                        </el-alert>
                        <el-form-item label="主机地址" prop="host">
                            <el-input class="sa-w-360" placeholder="请输入主机地址" v-model="form.model.host">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="使用空密码" prop="empty_password">
                            <el-switch v-model="form.model.empty_password" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </el-form-item>
                        <el-form-item v-if="!form.model.empty_password" label="密码" prop="password">
                            <el-input class="sa-w-360" placeholder="不修改则留空" v-model="form.model.password">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="端口" prop="port">
                            <el-input class="sa-w-360" placeholder="请输入端口" v-model="form.model.port">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="DB数据库" prop="select">
                            <div class="sa-flex-col sa-flex-1">
                                <el-input class="sa-w-360" placeholder="请输入DB数据库" v-model="form.model.select">
                                </el-input>
                                <div class="tip">建议显示指定 1-15 的数字</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="超时时间" prop="timeout">
                            <el-input class="sa-w-360" placeholder="请输入超时时间" v-model="form.model.timeout">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="连接持续性" prop="persistent">
                            <el-switch v-model="form.model.persistent" :active-value="true" :inactive-value="false">
                            </el-switch>
                        </el-form-item>
                    </template>

                </el-form>
            </el-scrollbar>
        </el-main>

        <el-footer v-if="state.tabActive!='sum/config/platform' && state.tabActive != 'sum/pay_config'"
            class="sa-footer--submit sa-flex sa-row-right">
            <el-button type="primary" @click="onConfirm">确定</el-button>
        </el-footer>
        <el-footer v-if="state.tabActive == 'sum/pay_config'" class="sa-footer sa-flex sa-row-right">
            <sa-pagination v-model="pagination" @pagination-change="getData"></sa-pagination>
        </el-footer>
    </el-container>
    <el-dialog class="configis-upgrade-dialog" :close-on-click-modal="false" v-model="state.configis_upgrade">
        <div class="configis-upgrade-image">
            <img src="/assets/addons/sum/img/commission/upgrade-config.png">
            <div class="configis-upgrade-close" @click="onOper('close')">
                <el-icon><circle-close-filled /></el-icon>
            </div>
            <div class="configis-upgrade-button sa-flex">
                <div class="configis-upgrade-button-refresh sa-flex" @click="onOper('refresh')">
                    <el-icon class="refresh-right">
                        <refresh-right />
                    </el-icon>
                    刷新
                </div>
                <div class="configis-upgrade-button-upgrade sa-flex" @click="onOper('upgrade')">去升级
                    <img class="icon-right" src="/assets/addons/sum/img/commission/icon-right.png">
                </div>
            </div>
        </div>
    </el-dialog>
</div>